<template>
    <div>
        <div style="margin-bottom:20px;">
            <a-button type="primary" @click="toNew">新增公告</a-button>
        </div>
        <a-table :columns="columns" :dataSource="list" rowKey="id" :pagination="pagination" :loading="tableLoding" @change="handleTableChange">
        <template slot="name" slot-scope="text">{{ text }}</template>
        <template slot="content"  slot-scope="text,record">
            <ellipsis :length="18" tooltip>{{record.content}}</ellipsis>
        </template>
        <template slot="thumb_path"  slot-scope="text,record">
            <ellipsis :length="22" tooltip>{{record.thumb_path}}</ellipsis>
        </template> 
        <template slot="action"  slot-scope="text,record"> 
            <a-dropdown placement="bottomCenter">
                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                    操作 <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                    <a-menu-item>
                    <span @click="checkDetail(record)">查看详情</span>
                    </a-menu-item>
                    <a-menu-item>
                    <span @click="delnotice(record)">删除公告</span>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </template>
        </a-table>
    </div>
</template>

<script>
import { Ellipsis } from '@/components'
import { noticeLists, noticeDelete } from '@/api/getData'
export default {
    name: 'SystemMsgList',
    components: {
    Ellipsis
    },
    data () {
        return{
            columns: [
                {
                title: 'ID',
                dataIndex: 'id'
                },
                {
                title: '标题',
                dataIndex: 'title'
                },
                {
                title: '描述',
                dataIndex: 'content',
                width: 320,
                scopedSlots: { customRender: 'content' }
                },
                {
                title: '缩略图',
                dataIndex: 'thumb_path',
                scopedSlots: { customRender: 'thumb_path' },
                width: 280,
                },
                {
                title: '创建时间',
                dataIndex: 'create_time'
                },
                {
                title: '操作',
                dataIndex: 'action',
                scopedSlots: { customRender: 'action' }
                }
            ],
            list: [],
            pagination: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            tableLoding: false
        }
    },
    
    mounted(){
        this.initList()
    },
    methods:{
        toNew(){
            this.$router.push({path: '/courseConf/systemMsg?updata=1'})
        },
        initList(){
            this.tableLoding = true
            noticeLists(this.pagination.current,this.pagination.pageSize).then(res=>{
                console.log(res)
                this.list = res.data.list
            }).finally(e=>{
                this.tableLoding = false
            })
        },
        handleTableChange(pagination) {
            console.log(pagination)
            const pager = { ...this.pagination };
            pager.current = pagination.current;
            this.pagination = pager;
            this.initList()
        },
        checkDetail(record){
            console.log(record)
            sessionStorage.setItem("noticeItem",JSON.stringify(record));
            this.$router.push({path: '/courseConf/systemMsg?updata=0'})
        },
        delnotice(item){
            let that = this
            this.$confirm({
                title: '确认删除?',
                content: '',
                onOk() {
                    noticeDelete(item.id).then(res=>{
                        console.log(res)
                        if(res.code == 200){
                            that.$message.info('删除成功');
                        }else{
                            that.$message.info('删除失败');
                        }
                        that.initList()
                    })
                },
                onCancel() {}
            });
        }
    }
}

</script>
<style>
.label{
    width:100px;
    margin-right:20px;
    text-align:right;
    line-height: 32px;
}
</style>
